<template>
  <view class="clan-members">
    <!-- 空状态占位 -->
    <view v-if="!hasValidMembers" class="empty-container">
      <view class="empty-icon-placeholder">
        <text class="empty-icon-text">👥</text>
      </view>
      <view class="empty-text">暂无组织架构成员</view>
    </view>

    <!-- 纵向分类展示 -->
    <view v-else class="category-container">
      <view v-for="(item, index) in positionGroups" :key="index" class="category-section">
        <view v-if="item.members && item.members.length > 0">
          <view class="category-title">{{ item.position }}</view>
          <view class="category-members">
            <scroll-view class="wall-scroll" scroll-x>
              <view
                v-for="(member, index) in item.members"
                :key="index"
                class="member-item"
                @click="$emit('view-member', member)"
              >
                <image class="member-avatar" :src="member.photoUrl" mode="aspectFill"></image>
                <view class="member-badges">
                  <view v-for="(pos, idx) in member.positionList" :key="idx" class="member-badge">
                    <text>{{ pos.name }}</text>
                  </view>
                  <view
                    v-if="!member.positionList || member.positionList.length === 0"
                    class="member-badge"
                  >
                    <text>成员</text>
                  </view>
                </view>
                <view class="member-name">{{ member.name }}</view>
                <view class="member-company">{{ member.company }}</view>
                <view class="member-position">{{ member.companyPosition }}</view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
// import ClanMember from '@/api/genealogy/clanMember'
import ClanAssociation from "@/api/genealogy/clanAssociation";
interface Member {
  id: string | number;
  name: string;
  description: string;
  level: number;
  fee: string;
  photoUrl: string;
  companyPosition: string;
  companyName: string;
  avatar: string;
  role: string;
  company: string;
  position: string;
  gender: string;
  nativePlace: string;
  phone: string;
  email: string;
  joinDate: string;
  businessScope: string;
  positionList: Array<{ name: string }>;
}

interface Props {
  memberList: Member[];
  clanId?: string;
}

const props = withDefaults(defineProps<Props>(), {
  clanId: "",
});
const emit = defineEmits<{
  "view-member": [member: Member];
}>();

const positionGroups = ref([]); // 按position字段分组的数组嵌套数组格式

// 计算属性：判断是否有实际的成员数据
const hasValidMembers = computed(() => {
  if (!positionGroups.value || positionGroups.value.length === 0) {
    return false;
  }
  // 检查是否有任何一个分组的members数组有数据
  return positionGroups.value.some((group) => group.members && group.members.length > 0);
});

const getClanMemList = async () => {
  try {
    console.log("props.clanId:", props.clanId);
    if (!props.clanId) {
      console.warn("clanId为空，跳过加载");
      return;
    }

    const res = await ClanAssociation.getStructure(props.clanId);
    console.log("接口返回数据:", res);

    if (res && Array.isArray(res.position)) {
      // 新的数据结构已经是按职位分组的，直接处理
      positionGroups.value = res.position.map((positionItem: any) => {
        const position = positionItem.name || "其他";
        const members =
          positionItem.member?.map((member: any) => ({
            id: member.id,
            name: member.name || "未知姓名",
            description: member.remarks || "成员",
            level: 0, // 新接口没有level字段
            fee: member.paymentAmount?.toString() || "",
            avatar: member.photoUrl || "",
            role: member.memberType || "",
            company: member.companyName || "",
            position: member.position || position,
            photoUrl: member.photoUrl || "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/fa6cbef09f834c41b7121841f6a9564e.png",
            companyPosition: member.companyPosition || "",
            companyName: member.companyName || "",
            gender: member.gender || "",
            nativePlace: member.nativePlace || "",
            phone: member.phone || "",
            email: member.email || "",
            joinDate: member.joinDate || "",
            businessScope: member.businessScope || "",
            positionList: member.positionList || [{ name: "成员" }],
          })) || [];
        return {
          position,
          members,
        };
      });
      console.log("处理后的职位分组数据:", positionGroups.value);
    } else {
      console.warn("接口返回数据格式不正确:", res);
      positionGroups.value = [];
    }
  } catch (error) {
    console.error("获取宗亲荟成员列表失败:", error);
    positionGroups.value = [];
  }
};
// 监听clanId变化，重新加载数据
watch(
  () => props.clanId,
  (newClanId) => {
    if (newClanId) {
      getClanMemList();
    }
  },
  { immediate: true }
);
</script>

<style scoped>
.clan-members {
  padding: 32rpx 24rpx;
}

.members-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.category-container {
  display: flex;
  flex-direction: column;
}

.category-section {
  padding-left: 10rpx;
  position: relative;
}

.category-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8rpx;
  bottom: 8rpx;
  width: 4px;
  background-color: #2568ff;
  border-radius: 2rpx;
  height: 14px;
}

.category-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  padding-left: 8rpx;
}

.category-members {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  padding-left: 8rpx;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.member-item {
  display: inline-block;
  width: 200rpx;
  background: #f7f7f7;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  flex-shrink: 0;
  border: 1px solid #eee;
  margin-right: 16rpx;
}

.member-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin: 0 auto 16rpx;
  display: block;
}

.member-badges {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4rpx;
  justify-content: flex-end;
  max-width: 120rpx;
}

.member-badge {
  background-color: #ff6b35;
  color: #fff;
  font-size: 16rpx;
  padding: 2rpx 6rpx;
  border-radius: 6rpx;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.member-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-company {
  font-size: 22rpx;
  color: #666;
  margin-bottom: 4rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-position {
  font-size: 20rpx;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 空状态样式 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  text-align: center;
}

.empty-icon-placeholder {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 50%;
}

.empty-icon-text {
  font-size: 80rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #666;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  line-height: 1.5;
}

/* 职位空状态样式 */
.position-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 20rpx;
  background: #f9f9f9;
  border-radius: 12rpx;
  margin: 0 8rpx;
}

.position-empty-icon-placeholder {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee;
  border-radius: 50%;
}

.position-empty-icon-text {
  font-size: 40rpx;
  opacity: 0.5;
}

.position-empty-text {
  font-size: 24rpx;
  color: #999;
}
</style>
